<template>
  <el-scrollbar :style="[!isCollapse ? 'width:200px' : 'width:auto']">
    <el-menu router :default-active="activeMenu" :collapse="isCollapse">
      <div
        :class="[!isCollapse ? 'control_icon' : 'control_icon_active']"
        @click="handleisCollapse"
      >
        <i
          class="iconfont icon-tongyongtubiaosheji_shouqicaidan collapse_icon"
        />
      </div>
      <menu-item v-for="item in allRoutes" :key="item.path" :menu="item" />
    </el-menu>
  </el-scrollbar>
</template>

<script>
import MenuItem from './MenuItem.vue';
import { watch, ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
export default {
  name: 'Menu',
  components: { MenuItem },
  setup() {
    let allRoutes = ref([]);
    const store = useStore();
    const route = useRoute();
    let isCollapse = ref(false);
    const activeMenu = computed(() => {
      const { meta } = route;
      if (meta.relevancePath) {
        return meta.relevancePath;
      }
      return route.path;
    });

    allRoutes.value = store.state.login.getRoutes;

    watch(
      () => store.state.login.getRoutes,
      (val) => {
        allRoutes.value = val;
      }
    );

    const handleisCollapse = () => {
      isCollapse.value = !isCollapse.value;
    };

    return { allRoutes, activeMenu, isCollapse, handleisCollapse };
  },
};
</script>

<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  position: relative;
  border-right: none;
  .collapse_icon {
    font-size: 16px;
    color: #aaaaaa;
  }
  .control_icon {
    position: absolute;
    z-index: 99999;
    right: 20px;
    top: 16px;
    cursor: pointer;
  }
  .control_icon_active {
    height: 56px;
    z-index: 99999;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
}

.el-sub-menu .el-sub-menu__icon-arrow {
  color: #c4c4c4;
  font-size: 14px;
  font-weight: 700;
}
</style>